<template>
    <div class="Download">
        <img src="/images/banner-客户端下载 拷贝@2x.png" alt="">
        <div class="download-content">
            <ul>
                <li @mouseenter="Downloadheart(0)" @mouseleave="close">
                    <img src="/images/安卓.png" alt="">
                    <img src="/images/downloaderweima.png" alt="" v-if="IsAndShow"  class="erweima">
                </li>
                <li @mouseenter="Downloadheart(1)" @mouseleave="close">
                    <img src="/images/ios.png" alt="">
                    <img src="/images/downloaderweima.png" alt="" v-if="IsIosShow"  class="erweima">
                </li>
                <li @mouseenter="Downloadheart(2)" @mouseleave="close">
                    <img src="/images/小程序.png" alt="">
                    <img src="/images/xiaochengxu.png" alt="" v-if="IsShow"  class="erweima">
                </li>
            </ul>
        </div>
        
        <div class="agh">
            
        </div>
    </div>
</template>
<script>
export default {
    name:'Download',
    data(){
        return{
            imgAges:['/images/安卓.png','/images/ios.png','/images/小程序.png'],
            IsAndShow:false,
            IsIosShow:false,
            IsShow:false
        }
    },
    methods:{
        close(){
            this.IsAndShow =false
            this.IsIosShow=false
            this.IsShow=false
        },
        Downloadheart(e){
            console.log(e)
            if(e == 0){
                this.IsAndShow =true
                this.IsIosShow=false
                this.IsShow=false
            }else if(e == 1){
                this.IsAndShow =false
                this.IsIosShow=true
                this.IsShow=false
            }else if(e == 2){
                this.IsAndShow =false
                this.IsIosShow=false
                this.IsShow=true
            }
        }
    }
}
</script>
<style lang="less" scoped>
.erweima{
    position: relative;
    width: 100px;
    top: 9px;
    left: 26px;
    border-radius: 10px;
}
    .Download{
        background:rgba(241,241,241,1);
        background-repeat: no-repeat;
        position: relative;
        width: 100%;
        margin-top: 80px;
    }
    .Download>img{
        width: 100%;
    }
     .Suspensionbox{
        position: fixed;
        width: 189px;
        height: 445px;
        right: 0;
        top: 200px;
        z-index: 10000;
        background-image: url("/images/悬浮框.png");
    }
    .Onlinecustomerservice{
        display: block;
        text-align: center;
        width: 140px;
        height: 80px;
        margin-left: 25px;
        margin-top: 140px;
        cursor: pointer;
    }
    .download-content{
        ul{
            float: left;
            list-style: none;
            position: relative;
            top: -81px;
            left: 36%;
            li{
                float: left;
                margin-left: 50px;
                cursor: pointer;
                img{
                    display: block;
                }
            }
        }
    }
    .xiaochengxu{
        position: absolute;
        left: 1160px;
        top: 351px;
        background-image: url(/images/xiaochengxuqipao.png);
        background-repeat: round;
        padding: 20px;
        img{
            width: 107px;
        }
    }
    .anzhuo{
        position: absolute;
        left: 790px;
        top: 351px;
        background-image: url(/images/xiaochengxuqipao.png);
        background-repeat: round;
        padding: 20px;
        img{
            width: 107px;
        }
    }
    .ios{
        position: absolute;
        left: 971px;
        top: 351px;
        background-image: url(/images/xiaochengxuqipao.png);
        background-repeat: round;
        padding: 20px;
        img{
            width: 107px;
        }
    }
    .agh{
        width: 100%;
        height: 260px;
        background: #0652D2;
        margin-top: -10px;
    }
</style>